/* eslint-disable */
<template>
<div class="rating_page">
     <head-top head-title="发送签到验证" go-back='true'></head-top>
    <div>
         <checklist title="待签到人员列表(默认勾选未签到人员)" :label-position="labelPosition" required :options="commonList" v-model="checklist" @on-change="change"></checklist>
       <flexbox>
        <flexbox-item><x-button @click.native="selectAll" plain type="primary">全选</x-button></flexbox-item>
        <flexbox-item><x-button @click.native="selectLeft" plain type="warn">反选</x-button></flexbox-item>
      </flexbox>
      <group label-width="4.5em" label-margin-right="2em" label-align="right">
     </group>
    </div>
   <x-button v-if="showButton"  type="primary" @click.native="regPush()" >发送验证</x-button>
   <!-- link="BACK" -->
   <x-button  v-if="showButton"  type="warn" link="BACK" >取消</x-button>
</div>
</template>
<script>
import {
  CellFormPreview,
  Group,
  Cell,
  XButton,
  XTextarea,
  XSwitch,
  Checklist,
  Flexbox,
  FlexboxItem
} from "vux";
import headTop from "src/components/head";
import { getRegList, sendRegInfo } from "src/service/actual";
import _ from "lodash";

export default {
  name: "regList",
  data() {
    return {
      labelPosition: "",
      commonList: [],
      checklist: [],
      sys: "",
      eventId: "",
      code: "",
      name: "",
      userInfo: null,
      task: [],
      showButton: false,
      actual: {
        id: undefined
      }
    };
  },
  components: {
    headTop,
    CellFormPreview,
    Group,
    Cell,
    XButton,
    XTextarea,
    XSwitch,
    Checklist,
    Flexbox,
    FlexboxItem
  },
  mounted() {
    console.log("regList");
    this.getDetail();
  },
  created() {
    console.log("regList");
    this.eventId = this.$route.query.eventId;
    console.log("this.enentId", this.eventId);
    this.userInfo = this.$store.state.user;
    this.code = this.userInfo.user_code;
    this.name = this.userInfo.user_name;
    console.log("this.code", this.code);
    // this.summary.code = this.userInfo.user_code;
    // this.summary.name = this.userInfo.user_name;
  },
  computed: {},
  methods: {
    //   待签到及已签到人员列表,需签到人员选择页面
    getDetail() {
      getRegList({
        eventId: this.eventId
        // code: this.code
      }).then(response => {
        console.log("regList");
        if (response.status === 200 && response.data.code === 2000) {
          console.log(response.data.item);
          this.actual.id = this.eventId;
          this.commonList = response.data.item.students;
          const left = _.without.apply(_, [this.commonList].concat(response.data.item.regNo));
          this.checklist = left;
        //   this.checklist = response.data.item.regNo;
          this.showButton = true;
        } else if (response.data.code === 2500) {
          this.showButton = false;
           this.$notify({
            title: "失败",
            message: response.data.msg,
            type: "error",
            duration: 2000
          });
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    // 根据选中人员（工号、姓名）,发送验证信息（链接）,并更新tr_actual及tr_reg表格信息
    // 第一次发送验证信息时,记录tr_reg信息
    regPush() {
        sendRegInfo({
            actualId: this.eventId,
            name: this.name,
            code: this.code,
            checklist: this.checklist,
        }).then(response => {
        if (response.status === 200 && response.data.code === 2000) {
          this.$notify({
            title: "成功",
            message: "发送成功",
            type: "success",
            duration: 2000
          });
        } else {
          this.$notify({
            title: "失败",
            message: response.status + response.data.msg,
            type: "error",
            duration: 2000
          });
        }
      });
    //   for (const student of this.checklist) {
    //     var stuCode = student.substring(0, 6);
    //     var stuName = student.substring(7);
    //     console.log(stuCode, stuName);
    //   }
    //   var stuCode = "202154";
    //   this.$router.push({
    //     path: "/home/register",
    //     query: { eventId: this.actual.id, code: stuCode }
    //   });
    },
    change(val, label) {
      console.log("change", val, label);
      console.log("val.length",val.length);
      console.log("label.length",label.length);
      if(val.length===0){
          this.showButton = false;
      }else{
           this.showButton = true;
      }
    },
    selectLeft() {
      const left = _.without.apply(_, [this.commonList].concat(this.checklist));
      this.checklist = left;
    },
    selectAll() {
      this.checklist = this.commonList;
    }
    // sumSub() {
    //   sumUp({
    //     summary: this.summary,
    //     actualId: this.eventId
    //   }).then(response => {
    //     if (response.status === 200 && response.data.code === 2000) {
    //       this.$notify({
    //         title: "成功",
    //         message: "提交成功",
    //         type: "success",
    //         duration: 2000
    //       });
    //     } else {
    //       this.$notify({
    //         title: "失败",
    //         message: response.status + response.data.msg,
    //         type: "error",
    //         duration: 2000
    //       });
    //     }
    //   });
    // }
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
.rating_page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  overflow: scroll;
}
</style>
